<html>
    <head>
        <title>指标关联</title>
        <link rel="stylesheet" href="../../../assets/bundle.element.css">
        <link rel="stylesheet" href="../../../style.css">

        <style>
            body{
                background: #F0F2F6;
            }


            .page-head{
                padding-left: 10px;
                padding-top: 10px;
                margin-bottom: 0px;
                border: solid 0px red;
                background: transparent;
            }

            .chart-outer{
                height: 200px;
            }

            .page-head .el-checkbox{
                margin-right: 30px;
                margin-bottom: 10px;
            }

            .page-head .el-checkbox + .el-checkbox{
                margin-left: 0px;
            }




        </style>
    </head>
    <body>
        <div class="page" id="page-kpi">

            <div class="page-title"> 指标关联</div>
            <div class="page-main">
                <el-row>
                    <el-col :span="4">
                        <dev-tree
                            v-on:click-node="onTreeNode"
                            v-on:check-node="onTreeCheck"
                            v-bind:ischeckbox="true"
                            v-bind:checkboxdisb="'upz'"
                            :tabsign="'d'" :zonetype="3"></dev-tree>
                    </el-col>
                    <el-col :span="20">
                        <div class="page-head">
                            <el-form :inline="true" style="margin-bottom: 0px;">
                                <el-form-item label="">
                                    <el-date-picker type="date" v-model="query.time" value-format="yyyy-MM-dd" placeholder="日期" style="width: 150px;"></el-date-picker>
                                </el-form-item>

                                <el-form-item label="">
                                    <el-select placeholder="指标关联" v-model="query.kpiSign" style="width: 150px;">
                                        <el-option label="基本参数" value="1"></el-option>
                                        <el-option label="功率参数" value="2"></el-option>
                                    </el-select>
                                </el-form-item>

                                <el-form-item>
                                    <el-tooltip effect="dark" content="请点击左边树中设备" v-model="tooltip" placement="right">
                                    <el-button type="primary" @click="search">查询</el-button>
                                    </el-tooltip>
                                </el-form-item>
                            </el-form>

                            <el-form :inline="true" v-show="query.kpiSign==1">
                                <el-checkbox-group v-model="kpi1CbxArr">
                                    <el-checkbox label="ia">A相电流</el-checkbox>
                                    <el-checkbox label="ib">B相电流</el-checkbox>
                                    <el-checkbox label="ic">C相电流</el-checkbox>
                                    <el-checkbox label="ua" >A相电压</el-checkbox>
                                    <el-checkbox label="ub" >B相电压</el-checkbox>
                                    <el-checkbox label="uc" >C相电压</el-checkbox>
                                  </el-checkbox-group>
                            </el-form>

                            <el-form :inline="true" v-show="query.kpiSign==2"  style="display: none;">
                                <el-checkbox-group v-model="kpi2CbxArr">
                                    <el-checkbox label="PA">A相负荷</el-checkbox>
                                    <el-checkbox label="PB">B相负荷</el-checkbox>
                                    <el-checkbox label="PC">C相负荷</el-checkbox>
                                    <el-checkbox label="PFA" >A相功率因数</el-checkbox>
                                    <el-checkbox label="PFB" >B相功率因数</el-checkbox>
                                    <el-checkbox label="PFC" >C相功率因数</el-checkbox>
                                    <!--
                                    <el-checkbox label="" >A相无功功率</el-checkbox>
                                    <el-checkbox label="" >B相无功功率</el-checkbox>
                                    <el-checkbox label="" >C相无功功率</el-checkbox>
                                    <el-checkbox label="" >总无功功率</el-checkbox>
                                    -->
                                    <el-checkbox label="Psum" >总有功功率</el-checkbox>

                                    <el-checkbox label="PFSum" >总功率因数</el-checkbox>
                                  </el-checkbox-group>
                            </el-form>
                        </div>

                        <div style="margin-left: 10px; width: 95%;" v-show="query.kpiSign=='1'">


                            <div class="chart-outer" v-for="key in kpi1CbxArr">
                                <chart-line v-bind:data="eleChartData1[key]"></chart-line>
                            </div>

                        </div>

                        <div style="margin-left: 10px; width: 95%;" v-show="query.kpiSign=='2'">
                            <div class="chart-outer" v-for="kpi in kpi2CbxArr">
                                <chart-bar v-bind:data="eleChartData1[kpi]"></chart-bar>
                            </div>
                        </div>







                    </el-col>
                </el-row>
            </div>


        </div>


        <script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
        <script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
        <script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
        <script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
        <script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>
        <script>

            var vuePage=new Vue({
                el:'#page-kpi',
                data:{
                    query:{
                        time:'',
                        kpiSign:'1'
                    },
                    kpi1CbxArr:[],
                    kpi2CbxArr:[],
                    eleChartData1:{},
                    orginData:[], //原数据
                    keyfiled:{
                        ia:'field16',
                        ib:'field17',
                        ic:'field18',
                        ua:'field13',
                        ub:'field14',
                        uc:'field15',
                        PA:'field23',
                        PB:'field24',
                        PC:'field25',
                        PFA:'field26',
                        PFB:'field27',
                        PFC:'field28',
                        Psum:'field12',
                        PFSum:"field19"

                    },
                    checkNodes:[], //已选择节点
                    tooltip:false,
                },
                methods:{
                    search:function(){
                        this.loadEnergyParam();
                    },
                    onTreeNode:function(data){
                        //alert( JSON.stringify(data) );
                    },

                    onTreeCheck:function(datas){
                        //alert( JSON.stringify(datas) );

                        this.checkNodes = datas;
                        this.loadEnergyParam();

                    },

                    //加载能耗参数
                    loadEnergyParam:function(){
                        var _self = this;
                        var idArr=[];
                        for(var i=0;i<this.checkNodes.length;i++){
                            idArr.push( this.checkNodes[i].attributes.deviceId );
                        }
                        var dArr = this.query.time.split('-');
                        var params=[];
                        for(var i=0;i<idArr.length;i++){
                            params.push({
                                url:'Analysis/getEnergyParam',
                                type:'get',
                                param:{
                                    zoneIds:idArr[i],
                                    zoneType:3,
                                    energyType:'Electric',
                                    year:dArr[0]||0,
                                    month:dArr[1]||0,
                                    day:dArr[2]||0
                                }
                            });
                        }
                        HttpUtil.when(params).success(function(data){
                            console.log('getEnergyParam',data);
                            _self.orginData = data;

                            var _t1 = JSON.stringify( _self.kpi1CbxArr);
                            _self.kpi1CbxArr=[]; //触发图表刷新
                            _self.kpi1CbxArr = JSON.parse(_t1);
                            //_self.refreshChartData();
                        });
                    },

                    refreshChartData:function(){

                        var kpiArr = this.query.kpiSign == 1?this.kpi1CbxArr:this.kpi2CbxArr;
                        for (var i = 0; i < kpiArr.length; i++) {


                            var xdata = [], ydata = [];
                            for (var j = 0; j < this.orginData.length; j++) {
                                var yValue = [], name = '';
                                var datas = this.orginData[j].data;

                                for (var k = 0; k < datas.length; k++) {
                                    //name一样
                                    if (name == '') name = datas[k].groupName;
                                    if (xdata.length < datas.length) { //x轴一样
                                        xdata.push(datas[k].attributes.dd_hour);
                                    }
                                    yValue.push(datas[k][this.keyfiled[kpiArr[i]]]);
                                }
                                ydata.push({
                                    name: name,
                                    value: yValue
                                });


                            }



                            this.eleChartData1[kpiArr[i]] = {
                                title: kpiArr[i],
                                x: xdata,
                                y: ydata
                            };

                            console.log('this.eleChartData1', this.eleChartData1);
                        }
                    }

                },
                created:function(){

                    this.query.time = TimeUtil.convertToString(new Date()).substr(0,10);
                    this.loadEnergyParam();



                    /*
                    HttpUtil.$whenfuc([
                        AnalysisData.getEnergyParamArr([1],0,'Electric',this.query.time),
                        UserData.login('Admin','123456')
                    ]).success(function(data){
                        console.log('$whenfuc',data);
                    });*/




                },
                mounted:function(){
                    this.tooltip=true;
                },

                watch:{
                    kpi1CbxArr:function(newVal,oldVal){
                        this.refreshChartData();
                    },
                    kpi2CbxArr:function(newVal,oldVal){
                        this.refreshChartData();
                    }
                }
            });


        </script>

    </body>
</html>
